<template>
	<view>
		<!-- <h2>购物车</h2> -->
		<view id="beiJing">
			<!-- 头部的店家名称 -->
			<view v-for="item in arrTitle" :key="item.titleId">
				<radio value="r1" :checked="item.state" @click="changChecked(item)"></radio><span id="titleName">{{item.titleName}}</span>
            <!-- 标题名称下的  大容器 -->
				<view class="bigBox" v-for="itemfood in item.arr" :key="itemfood.foodId">
					<radio value="r1" :checked="itemfood.state" @click="changCheckedChiren(itemfood)"></radio>
					<!-- 循环店家里面订单的食品的  图片Box1 -->
					<view class="imgBox">
						<image mode="aspectFit" :src="itemfood.imgSrc" alt="" ></image>
					</view>
						<!-- 循环店家里面订单的食品的  Box2 名称 价格 -->
					<view class="elsBox">
						<view id="foodName">{{itemfood.foodsName}}</view>
						<view><span>￥</span>{{itemfood.price}}</view>
					</view>
					<!-- 循环店家里面订单的食品的  删除订单  添加  减少数量按钮 -->
					<!-- 删除按钮icon -->
					<view class="item" @click="cancelMenu(item,itemfood.foodId)">X
					<!-- 	<icon :type="iconType" size="26"/> -->
					</view>
					<!-- 加和减的按钮 -->
					<view class="ajBtn">
						<view class="btn" @click="changNum(1,item,itemfood.foodId)">-</view>
						<view>{{itemfood.foodNum}}</view>
						<view class="btn" id="add" @click="changNum(2,item,itemfood.foodId)">+</view>
					</view>
				</view>
		    </view>
			<view class="noData">
				<view>没有更多数据了！</view>
				<!-- <view class="backHeader" @click="goTop" :hidden="showTop">↑</view>	 -->
				<view class="top" :style="{'display':(flag===true? 'block':'none')}">
					<uni-icons class="topc" type="arrowthinup" size="50" @click="top">顶部</uni-icons>
				</view>
			</view>	
		</view>
		<view>

		</view>
		<view class="footer">
			<checkbox :checked="checked" class="choose" @click="selectAll()">全选</checkbox>
			<view class="totalPrice">合计：{{myPrice}}</view>
			<button class="submitBtn" @click="settlement">结算</button>
		</view>
	</view>
</template>

<script>
import * as api from "../../utils/api"
import {uniIcons} from "@dcloudio/uni-ui"
	export default {
		components: {uniIcons},
		data() {
			return {
				iconType: 'cancel',
				showTop:false,
				 flag:false,
				/* "disableScroll":true, */
			/* 	checked:false,
				checkedChiren:false, */
				arrTitle:[
					{
					titleId:1,	
					titleName:"小猫西餐.酒馆",
					state:0,
					arr:[
					{foodId:1,imgSrc:"/static/foods1.jpg",foodsName:"坚果轻食沙拉",price:18,foodNum:1,state:0},
					{foodId:2,imgSrc:"/static/foods6.jpg",foodsName:"草莓甜甜圈",price:18,foodNum:2,state:0},
					{foodId:3,imgSrc:"/static/foods3.jpg",foodsName:"卡布奇诺",price:18,foodNum:4,state:0},
					{foodId:4,imgSrc:"/static/foods4.jpg",foodsName:"两人参",price:18,foodNum:1,state:0},
					{foodId:5,imgSrc:"/static/foods5.jpg",foodsName:"三人餐",price:18,foodNum:5,state:0},
					{foodId:6,imgSrc:"/static/foods6.jpg",foodsName:"一人餐",price:18,foodNum:6,state:0},	
				]
				},
				{
					titleId:2,	
					titleName:"小火锅",
					state:0,
					arr:[
					{foodId:1,imgSrc:"/static/foods1.jpg",foodsName:"坚果轻食沙拉",price:68,foodNum:6,state:0},
					{foodId:2,imgSrc:"/static/foods2.jpg",foodsName:"草莓甜甜圈",price:68,foodNum:1,state:0},
					{foodId:3,imgSrc:"/static/foods3.jpg",foodsName:"卡布奇诺",price:68,foodNum:5,state:0},
					{foodId:4,imgSrc:"/static/foods4.jpg",foodsName:"两人参",price:68,foodNum:4,state:0},
					{foodId:5,imgSrc:"/static/foods5.jpg",foodsName:"三人餐",price:68,foodNum:8,state:0},
					{foodId:6,imgSrc:"/static/foods2.jpg",foodsName:"一人餐",price:68,foodNum:2,state:0},
					
				]
				
				},
				],
				a:12
			}
		},
		
		onLoad() {
			uni.request({
				url:api.GET_SHOP_CART,
				data:{userId:1},
				method: 'get',
				success:(res)=>{
					this.arrTitle=res.data
				}
			})
    
		},
		/* onPageScroll(){
			/* console.log(e.scrollTop) */
			/* that.setData({ */
				/* scrollTop:e.scrollTop */
			/* }) */
			
	/* 	} */ 
		computed: {
			/* 合计数：思路通过商品的是否状态来判断合计价格是否变化
			   通过第一组数组循环拿到下面的arr==>再拿到arr的每一项的状态
			   ===》根据状态来判断累加的计算金额===》返回总价*/
			myPrice(){
			  let myPrice=0
              this.arrTitle.forEach(element=>{
				  /*   console.log(element.state) */
			        element.arr.forEach((item)=>{
					   if(item.state){
						   myPrice=myPrice+item.price*item.foodNum
					   }
					})
			  })
			  return myPrice
			}
		},
		methods: {
			/* 点击==店铺的单选框  店铺下面的所有事物的单选框 */
			changChecked(obj){
			  let index=this.arrTitle.indexOf(obj)
			  	obj.state=!obj.state
			  obj.arr.forEach(element => {
				  if(obj.state!=element.state){
                   element.state=!element.state
				  }  
			  });
                this.arrTitle.splice(index,1,obj)
			},
			/* 点击每个食品  单独勾选 */
			changCheckedChiren(obj){
				obj.state=!obj.state
			},
			/*点击加减的时候  分别加减食品数量*/
		   changNum(num,obj,objTwo){
			   if(num==1){
				// 请求后端数据 1减少  map返回的是一个新的数组
			    this.arrTitle=this.arrTitle.map((item)=>{
					if(item.titleId==obj.titleId){
						item.arr=item.arr.map((itemData=>{
						if(itemData.foodId==objTwo &&itemData.foodNum>0){ 
                            itemData.foodNum--
						}
						return itemData
					}))
	
					}
					return item
				})
			   }else{
				   /* 2添加  添加商品*/
				this.arrTitle=this.arrTitle.map((item=>{
					if(item.titleId==obj.titleId){
                        item.arr=item.arr.map((itemData=>{
							if(itemData.foodId==objTwo){
                                itemData.foodNum++
							}
							return itemData
						}))
					}
					return item
				}))
			   }
		   },
		   /* 点击删除按钮的时候  根据店铺Id==食品ID来删除 */
		   cancelMenu(obj,objTwo){
			   console.log(objTwo);
			   this.arrTitle=this.arrTitle.map((item=>{
				   /* 返回第一层数组===店铺的信息==拿到店铺Id */
				   if(item.titleId==obj.titleId){
					   for(let i=0;i<item.arr.length;i++){
							if(item.arr[i].foodId==objTwo){
								item.arr.splice(i,1)		
							} 
					   }
				   }
				   return item
			   }))
		   },
		    top() { //回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			 onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
				if(e.scrollTop>600){ //当距离大于600时显示回到顶部按钮
					this.flag=true
				}else{ //当距离小于600时隐藏回到顶部按钮
					this.flag=false
				}
			},
		 /*   goTop(){
			   
             /*   if(e.currentTarget.offsetTop){ */
                /*    console.log(123123)
				   uni.PageScrollTo({
						scrollTop: 0
						
				   }) */
		/* 	 }else{
				wx.showModal({
				title: '提示',
				content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
			   })
			 } */
		 /*   }, */ 
		   /* 点击全选的时候将所有的店铺和食品都勾选上 */
		   selectAll(){
			    console.log(12345)
			    this.arrTitle.forEach(element=>{
				  this.changChecked(element)	 
			  })
		   },
		   /* 点击结算的时候跳转页面==settlement界面 */
		   settlement(){
                wx.navigateTo({
				  url: '/pages/settlement/settlement',
			  });
		   }
		}
	}
</script>

<style scoped>
#beiJing{
	background-color:rgb(245,246,247);
	margin-bottom: 50rpx;
	padding-bottom: 100rpx;
}
/* 头部的文字加粗 */
#titleName{
	font-weight: bolder;
}
/* 购物车里面最大的box */
.bigBox{
	display: flex;
	margin: 30rpx 0;
	position: relative;
    background-color:white;
	border-radius: 25rpx;
	/* border: 1px solid black; */
}	
/* 装图片的box */
.imgBox{
 width: 180rpx;
 height: 180rpx;	
 overflow: hidden;
 /* border: 1px solid red; */
 background-color: white;
 border-radius: 180rpx;
 margin-right: 15rpx;
}
/* 图片 */
.imgBox>image{
	width: 100%;
	height: 100%;
}
/* 实物名称和价格的box */
.elsBox{
/* 	width: 120px; */
    padding-top: 45rpx;
	height: 120rpx;	
	display:flex;
    flex-direction:column;
	justify-content:space-around;
	/* border: 1px solid gold; */
}
#foodName{
	/* font-size: 18rpx; */
	font-weight: bolder;
}
/* xx和加、减按钮的box */
.iconBtn{
	width: 120rpx;
/* 	position: relative; */
/* 	border: 1px solid black; */
}
/* xx  取消按钮===类似删除 */
.item{
	position: absolute;
	right: 20rpx;
	top: 50rpx;
	font-weight: nomal;
	color: #868686;
}
/*加和减两个按钮的box */
.ajBtn{
	display: flex;
	justify-content:flex-end;
	position: absolute;
	right: 0;
	bottom:0;
	/* border: 1px solid rgb(132, 0, 255); */
}
/* 加和减两个按钮的 */
.btn{
	margin:0 18rpx;
	width: 40rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	background: #FFFFFF;
	border: 1px solid #BFBFBF;
	border-radius: 10rpx;
}
/* 添加数量的按钮颜色 */
#add{
	background-color:#F9CC66;
}
/* 底部没有数据的提示文字  以及回到顶部的箭头 */
.noData{
	/* text-align: center; */
	display: flex;
	justify-content:center
}
/* 回到顶部的箭头 */
.backHeader{
	width:50rpx;
	height:50rpx;
	line-height: 50rpx;
	border-radius: 50rpx;
	text-align: center;
	background-color: #F9CC66;
	color:  #868686;
}
/* 尾部  全选框  总价  结算按钮 */
.footer{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content:space-between;
	align-items: center;
	position: fixed;
	left:0;
	bottom: 0;
	background-color: white;
	/* padding: 0 50px; */
}
.submitBtn{
	width: 220rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin: 0;
	background-color:#F9CC66;
	border-radius: 50rpx;
}
/* 回到顶部 */
    .top {
        position: relative;
        display: none; /* 先将元素隐藏 */
    }
 
    .topc {
        position: fixed;
        right: 0;
        background: #F0F0F0;
        top: 70%;
		color: #868686;
        height: 50rpx;
        line-height: 50rpx;
		border-radius: 50rpx;
		opacity: 0.7;
    }
</style>
